<template>
  <div class="official combground">
    <div class="container">
      <div class="comtitle">
        <h2 class="comh2">发布委托</h2>
      </div>
      <div class="content">
        <div class="step">
          <m-step :steps="steps" :active="active" />
        </div>
        <div class="step-info">
          <router-view :mydata="mydata" :type="type" ref="form" />
        </div>
        <div class="btn">
          <m-button
            width="235"
            class="pre"
            style="margin-right: 10px;"
            @click="pre"
            v-if="active > 0 && active < 2"
            >上一步</m-button
          >
          <m-button
            width="235"
            style="margin-right: 10px;"
            @click="submit('save')"
            v-if="active === 1"
            >保存为草稿</m-button
          >
          <m-button width="235" @click="next" v-if="active < 1"
            >下一步</m-button
          >
          <m-button width="235" @click="submit('pub')" v-if="active === 1">提交</m-button>
          <m-button width="235" @click="index" v-if="active === 2"
            >去首页逛逛</m-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import MStep from "@/components/common/m-step/MStep";
import MButton from "@/components/common/m-button/MButton";
import { requirementPub, requirementDe, requirementUp } from "@/request/api";

export default {
  name: "Official",
  components: {
    MButton,
    MStep
  },
  data() {
    return {
      id: "",
      type: "add",
      mydata: {
        goods_info: "",
        goods_type: "1",
        goods_class_1: "",
        goods_class_1_txt: "",
        goods_class_2: "",
        goods_class_2_txt: "",
        goods_num: "",
        goods_unit: "",
        goods_unit_txt: "",
        goods_price: "",
        currency: "",
        goods_condition: "",
        transport_type: "",
        transport_type_txt: "",
        country_type: "1",
        province: "广东省",
        city: "广州市",
        area: "海珠区",
        address: "",
        days: "",
        pay_type: "",
        remarks: "",
        end_time: "",
        proPic: [],
        proFile: [],
        supportList: [],
        rulesCheckList: []
      },
      steps: [
        { title: "填写需求" },
        { title: "预览信息" },
        { title: "提交成功" }
      ],
      active: 0
    };
  },
  watch: {
    "$route.name": {
      handler(val) {
        if (val === "Official1") {
          this.active = 0;
        } else if (val === "Official2") {
          this.active = 1;
        } else if (["Official3Draft", "Official3Submit"].includes(val)) {
          this.dataInit();
          this.active = 2;
        }
      },
      immediate: true
    },
    mydata(val) {
      console.log(val);
    }
  },
  created() {
    this.id = this.$route.query.id;
    if (this.id) {
      this.type = "edit";
      this.getInfo();
    }
  },
  methods: {
    getInfo() {
      let that = this;
      requirementDe(this.id).then(res => {
        if (res.status === 200) {
          res.data.country_type += "";
          res.data.goods_type += "";
          res.data.currency += "";
          res.data.goods_unit += "";
          res.data.transport_type += "";
          res.data.pay_type += "";
          var arr = [],arr2 = [];
          res.data.send_type_all == 1 ? arr.push("all") : "";
          res.data.send_type_zbz == 1 ? arr.push("zbz") : "";
          res.data.send_type_web == 1 ? arr.push("web") : "";
          res.data.supportList = arr;
          res.data.rule_72 == 1 ? arr2.push("rule_72") : "";
          res.data.rulesCheckList = arr2;
          var date = new Date(res.data.end_time);
          res.data.end_time = date.getTime();
          that.mydata = res.data;
          console.log(that.mydata);
        } else {
          that.$toast.show(res.message, 1000, false);
        }
      });
    },
    dataInit() {
      this.mydata = {
        goods_info: "",
        goods_type: "1",
        goods_class_1: "",
        goods_class_1_txt: "",
        goods_class_2: "",
        goods_class_2_txt: "",
        goods_num: "",
        goods_unit: "",
        goods_unit_txt: "",
        goods_price: "",
        currency: "",
        goods_condition: "",
        transport_type: "",
        transport_type_txt: "",
        country_type: "1",
        province: "广东省",
        city: "广州市",
        area: "海珠区",
        address: "",
        days: "",
        pay_type: "",
        remarks: "",
        end_time: "",
        proPic: [],
        proFile: [],
        supportList: [],
        rulesCheckList: []
      };
    },
    next() {
      if (this.active === 0) {
        this.$refs.form.look();
      }
    },
    pre() {
      if (this.active === 1) {
        this.$router.push({ path: "/official/1" });
      }
    },
    index() {
      this.$router.push({ name: "Home" });
    },
    demand() {
      this.$router.push({ name: "MyDemand" });
    },
    submit(type) {
      let that = this;
      let mydata = that.mydata;
      if (mydata.rulesCheckList.indexOf("agree") == -1) {
        that.$toast.show("请阅读并同意发布需求规则", 1000, false);
        return false;
      }
      let data = {
        demand_type: 1,
        goods_info: mydata.goods_info,
        goods_type: mydata.goods_type,
        goods_class_1: mydata.goods_class_1 || mydata.class1 && mydata.class1.store_category_id || '',
        goods_class_2: mydata.goods_class_2 || mydata.class2 && mydata.class2.store_category_id || "", // 可能没有下一级
        goods_num: mydata.goods_num,
        goods_unit: mydata.goods_unit,
        goods_price: mydata.goods_price,
        currency: mydata.currency,
        goods_condition: mydata.goods_condition,
        img_list: that.$common.arrToString(mydata.proPic) || mydata.img_list,
        file_list: that.$common.arrToString(mydata.proFile) || mydata.file_list,
        country_type: mydata.country_type,
        transport_type: mydata.transport_type,
        country: "中国",
        province: mydata.province,
        city: mydata.city,
        address: mydata.address,
        days: mydata.days,
        pay_type: mydata.pay_type,
        remarks: mydata.remarks,
        end_time: mydata.end_time,
        send_type_all: mydata.supportList.indexOf("all") == -1 ? "" : "1",
        send_type_zbz: mydata.supportList.indexOf("zbz") == -1 ? "" : "1",
        send_type_web: mydata.supportList.indexOf("web") == -1 ? "" : "1",
        rule_72: mydata.rulesCheckList.indexOf("rule_72") == -1 ? "" : "1",
        status: type == "pub" ? "0" : "2"
      };
      if (this.type == "edit") {
        requirementUp({ ...data, id: this.id }).then(res => {
          if (res.status === 200) {
            if (type == "pub") {
              that.$router.push({ path: "/official/3-2" });
            } else {
              that.$router.push({ path: "/official/3-1" });
            }
          } else {
            that.$toast.show(res.message, 1000, false);
          }
        });
      } else if (this.type == "add") {
        requirementPub(data).then(res => {
          if (res.status === 200) {
            if (type == "pub") {
              that.$router.push({ path: "/official/3-2" });
            } else {
              that.$router.push({ path: "/official/3-1" });
            }
          } else {
            that.$toast.show(res.message, 1000, false);
          }
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
/deep/ .m-button.pre .el-button {
  background: #fff !important;
  border: 1px solid rgb(228, 139, 44) !important;
  color: rgb(228, 139, 44) !important;
}
.official {
  padding: 60px 0 80px 0;

  .content {
    width: 100%;
    padding: 65px 180px 85px 170px;
    color: #656565;
    background: #fff;
    margin-top: 50px;
    font-size: 16px;

    .step-info {
      margin-top: 70px;
    }

    .btn {
      text-align: center;
      display: flex;
      justify-content: center;
      padding-top: 60px;
    }
  }
}
@media only screen and (max-width: 1200px) {
  .official {
    padding: 70px 0;
    .content {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      padding: 65px 0 85px;
      .btn {
        padding-top: 90px;
      }
    }
    .content .step {
      width: 1005px;
    }
    .step-info {
      width: 1005px;
    }
  }
}
</style>
